<template>
    <div class="prohibit">
        <h1>403</h1>
        <div>抱歉，您无权访问该页面。</div>
    </div>
</template>

<script>
export default {
    name:'Prohibit'
}
</script>

<style lang="less" scoped>
    .prohibit
    {
        height: 100%;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        h1
        {
            color: #409eff;
            font-size: 112px;
            // margin-bottom: 200px;   //根据实际更改
            // margin-right: 200px;    //根据实际更改
            position: relative;
        }
        div
        {
            color: rgba(0,0,0,.45);
            font-size: 12px;
        }
        h1::after
        {
            /* 新增一个403 */
            content: '403';
            /* 颜色改为透明 */
            color: transparent;
            position: absolute;
            top: 0;
            left: 0;

            /** 渐变背景 */
            background: linear-gradient(to right,#41b883,#364a60);
            /** 按照文字范围剪切图片 */
            background-clip: text;
            -webkit-background-clip: text;

            /** 按圆形范围展示 */
            clip-path: circle(100px at 0% 50%);
            animation: light 2s ;
        }
    }

    @keyframes light
    {
        0%
        {
            clip-path: circle(100px at 0% 50%);
        }
        50%
        {
            clip-path: circle(100px at 100% 50%);
        }
        100%
        {
            clip-path: circle(100px at 0% 50%);
        }
    }
</style>

